<template>
    <div class="main-content">
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="query" ref="query" label-width="45px" label-position="right">
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="日期" prop="reportDate">  
                                <el-date-picker v-model="query.reportDate" :picker-options="pickerOptions1" :clearable="false" :editable="false" type="date" placeholder="请选择日期" style="width:100%"></el-date-picker>    
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="onSubmit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="eCharts1" v-loading="loadingChart" >
                <div class="charts-title">用户日使用时长分布</div>
                <div class="charts-display">
                    <trendChart width='100%' height='100%' id="trendChart1" :option='barChart1Option'></trendChart>
                </div>
            </div>
            <div slot="table" >
                <div class="table-title"></div> 
                <el-table :data="tableData" border v-loading="loading" style="width: 100%">
                    <el-table-column label="使用时长" align="center">
                        <template scope="scope">
                            <span>{{scope.row.timeLength | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="用户数" align="center">
                        <template scope="scope">
                            <span>{{scope.row.userNumber | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="日期" align="center">
                        <template scope="scope">
                            <span>{{scope.row.date | isNull}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="table-title"></div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import trendChart from 'components/Charts/trendChart';
    import {listUseTimeLength} from 'api/pingtaifenxi';

    // import { mapState, mapActions } from 'vuex';
    export default{
        components: {echartsLayout, trendChart},
        data() {
            return {
                loading: true,
                loadingChart: true,
                formState: false,
                dataListState: true,
                eCharts1State: false,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: true,
                tableState: false,
                query: {
                    reportDate: new Date()
                },
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                tableData: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                barChart1Option: null
            }
        },
        created() {
            this.queryData();
        },
        methods: {
            onSubmit() {
                this.pageQuery.currentpage = 1;
                this.queryData();
            },
            // // 设置时间格式
            // setTime(startTime, endTime) {
            //     let start = startTime > 60? Math.floor(startTime/60):startTime ;
            //     let end = startTime> 60 && endTime > 60? Math.floor(endTime/60):endTime;
            //     let item = start +'~' + end + (startTime > 60?'分钟':'秒');
            //     return item;
            // },
            queryData() {
                this.loading = true;
                this.loadingChart = true;
                let date=this.query.reportDate==''?moment().format('YYYY-MM-DD'):moment(this.query.reportDate).format('YYYY-MM-DD'); 
                listUseTimeLength(date).then(res => {
                    this.loading = false;
                    this.loadingChart = false;
                    let xAxisData=[];
                    let barList=[];
                    let timeLength=['1~3秒', '3~10秒', '10~30秒', '30~60秒', '1~3分钟', '3~10分钟', '10~30分钟', '30分钟以上'];
                    timeLength.forEach((item, index) => {
                        res.data.content.forEach(val => {
                            if (item==val.timeLength) {
                                xAxisData.push(val.timeLength)
                                barList.push(val.userNumber)
                            }
                        })
                    })
                    this.barChart1Option = {
                        color: ['#2EC7C9'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend: {
                            data: ['用户数']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: xAxisData  // ['1~3秒', '3~10秒', '10~30秒', '30~60秒', '1~3分钟', '3~10分钟', '10~30分钟'] 
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                data: barList,
                                type: 'bar'
                            }
                        ]
                    };
                    this.tableData = res.data.content;
                }).catch(() => {
                    this.loading = false;
                    this.loadingChart = false;
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        $bgcolor: #fff;
    }
</style>                     